<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--  
        1. 获取标签对象(元素对象)
            *通过id获取         documnet.getElementById()
            *通过class获取      document.getElementsByClassName()
            *通过标签名获取     documnet.getElementsByTagName() 
    -->
    <ul>
        <li id="one">第一阶段:</li>
        <li class="list">《JavaScript:权威指南》</li>
        <li class="list">《细说PHP》</li>
        <li class="list">《MySQL必知必会》</li>
        <li id="two"> 第二阶段: </li>
        <li> 《教你怎么不生气》 </li>
        <li> 《佛经》 </li>
        <li> 《老子》 </li>
        <li> 《沉默的愤怒》 </li>
        <li id="three"> 第三阶段: </li>
        <li> 《颈椎病康复指南》 </li>
        <li> 《腰间盘突出日常护理》 </li>
        <li> 《精神病症状学》 </li>
        <li id="four"> 第四阶段: </li>
        <li> 《或者》 </li>
    </ul>
    <ol>
        <li class="list">小米</li>
        <li class="list">大米</li>
        <li class="list">紫米</li>
        <li class="list">黑米</li>
    </ol>
    <script>
        // id
        var a = document.getElementById('one');
        console.log(a);
        // class
        // 通过class得到的一个集合,单一获取是,可通过数组形式进行获取
        var b = document.getElementsByClassName('list');
        console.log(b);
        console.log(b[0]);
        // 精确获取局部的class
        var b1 = document.getElementsByTagName('ul');
        console.log(b1);
        console.log(b1[0]);
        console.log(b1[1]);//不存在的索引:undefined
        var b2 = b1[0].getElementsByClassName('list');
        console.log(b2);
        // tag
        // 通过tag标签得到的一个集合,单一获取时,可通过数组形式获取
        var c = document.getElementsByTagName('li');
        // console.log(c);
        // console.log(c[12]);
    </script>
    <!--  
        2. 查看对象
            console.log(对象);
            console.dir(对象);详细的输出该对象(支持属性,方法)
    -->
    <input type="text" id="text" placeholder="your name">
    <button onclick="demo()">框中表单的内容</button>
    <script>
        var a = document.getElementById('one');
        console.log(a);
        console.dir(a);
        console.log(a.id);
        console.log(a.innerHTML);
        var b = document.getElementById('text');
        console.log(b.type);
        console.log(b.placeholder);
        function demo(){
            b.focus();
        }
    </script>
    <!--  
        3. 设置css属性
            格式:
                标签对象.style.css属性名 = 属性值
    -->
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.style.width = '200px';
        box.style.height = '200px';
        box.style.backgroundColor = 'pink'; // background-color
    </script>
    <!--  
        4. 获取/设置 对象的正文内容
            获取对象的正文内容:对象.innerHTML
            设置对象的正文内容:对象.innerHTML = 值
    -->
    <script>
        box.innerHTML = '令人挠头的部分从今天开始';
        box.innerHTML = '其实看开点,不要愁,以后还会更愁的';
    </script>
</body>
</html>